<template>
  <div class="app-container">
    <!-- 回款单列表 -->
    <div class="receivableSheet">
      <!-- 查询模块 -->
      <el-form :model="form" ref="form" label-width="130px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="来源单号">
              <el-input v-model="form.orderSn" placeholder="来源单号" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select v-model="form.hospitalName" filterable clearable placeholder="请选择">
                <el-option
                  :label="item.name"
                  :value="item.name"
                  v-for="item in hospitalList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="来源类型">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="流水单" :value="3"></el-option>
                <el-option label="项目订单" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" width="236">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button
                type="primary"
                @click="handleExport"
                :disabled="exportFlag"
                v-if="$store.state.user.permissionJson.indexOf('AdminReportProvider.report') !=-1"
              >导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table :data="tableData" border height="1050" style="width: 100%" ref="tableData">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
        <el-table-column prop="type" label="来源类型"></el-table-column>
        <el-table-column prop="orderSn" label="来源单号"></el-table-column>
        <el-table-column prop="userName" label="客户姓名" />
        <el-table-column prop="userPhone" label="客户手机号" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.userPhone |phonereg}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="goldSilverRatio" label="金币结算比率">
          <template slot-scope="scope">{{ scope.row.goldSilverRatio || 0 }}%</template>
        </el-table-column>
        <el-table-column prop="gold" label="金币"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
      </el-table>
      <div class="pagesCon">
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="page_sizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HospitalStatement from "@/api/HospitalStatement";
import commonFn from "@/utils/common";
export default {
  name: "HospitalStatementIndex",
  data() {
    return {
      tableLoading: true,
      // 时间容器
      dates: null,
      payTime: null,
      // table列表
      tableData: [],
      //导出按钮默认状态
      exportFlag: false,
      // form表单
      form: {
        // salesType:0,
        ispc: 1,
        orderSn: "",
        userName: "",
        userPhone: "",
        hospitalName: null,
        createdAtStart: "",
        createdAtEnd: "",
        PayStar: null,
        PayEnd: null,
        pageNum: 1,
        pageSize: 10
      },
      page_sizes: [10, 30, 50, 100], //每页显示个数
      page_totals: 60, //总条目数,
      // 医院名称
      hospitalList: []
    };
  },
  filters: {
    payType(e) {
      switch (e) {
        case "1":
          return "信用卡快捷支付";
        case "2":
          return "借记卡快捷支付";
        case "3":
          return "微信支付";
        case "4":
          return "支付宝支付";
      }
    }
  },
  watch: {
    dates(val) {
      this.form.createdAtStart = this.dates ? this.dates[0] : "";
      this.form.createdAtEnd = this.dates ? this.dates[1] : "";
    },
    payTime(val) {
      this.form.PayStar = this.payTime ? this.payTime[0] : "";
      this.form.PayEnd = this.payTime ? this.payTime[1] : "";
    },
    tableData(val) {
      // console.log(val);
      this.exportFlag = val == null ? true : false;
      console.log(this.exportFlag);
    }
  },
  created() {
    // this.hospitalSelect();
  },
  mounted() {
    // this.form.targetId = Number(this.$store.state.user.hospitalName);
    this.getList(this.form);
    this.hospitalSelect();
  },
  methods: {
    //按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    //医院名称下拉列表
    hospitalSelect() {
      HospitalStatement.hospitalSelect()
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            let resData = res.data.data;
            let newArr = [];
            resData.forEach(e => {
              // console.log(e)
              newArr.push({
                name: e.name,
                value: String(e.id)
              });
            });
            // newArr.unshift({
            //   name: "全部",
            //   value: null
            // });
            // console.log(newArr);
            this.hospitalList = newArr;
            // this.form.hospitalName = this.hospitalList[0].value;
            // this.getList(this.form);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 获取列表
    getList(e) {
      HospitalStatement.lisfn(e)
        .then(res => {
          // console.log(res)
          if (!res.data.code) {
            let resData = res.data.data;
            this.tableData = resData.list;
            this.page_totals = resData.count;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.errorStatus(err);
          this.tableLoading = false;
        });
    },
    // 查询
    handleSearch() {
      this.form.pageNum = 1;

      this.getList(this.form);
    },
    // 导出
    handleExport() {
      let dates = { ...this.form };
      HospitalStatement.exportfn(dates)
        .then(res => {
          commonFn.downFile("金银币", res);
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },

    // 每页显示条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    }
  }
};
</script>
<style scoped>
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
/* 分页样式 */
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
</style>
